<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrap"></div>
<script>

    /**
     * 自定义右下角弹窗功能
     */

    let Popup = (function () {
        /**
         *
         * @type {null}
         */
        let ins = null
        
        return class  {
            constructor(text){
                /**
                 * 如果已经被实例过
                 * @param ins
                 */
                if(ins){
                    ins.ele.innerText = text
                    // ins.show()
                    return ins
                }
                ins = this
                /**
                 * 如果没有被实例过
                 */
                this.ele = document.createElement("div")
                this.ele.style.cssText = "position:fixed;bottom:-300px;right:0;z-index:999999999999999;width:260px;height:110px;padding:20px;background-color:#eee;box-shadow:0 0 2px #000;transition:bottom .5s;user-select:none;-moz-user-select:none;"
                this.ele.innerText = text
                // this.show()
            }

            show(){
                this.ele.parentNode && document.body.removeChild(this.ele)
                document.body.appendChild(this.ele)
                /**
                 * 页面重绘
                 */
                this.ele.offsetLeft
                this.ele.style.bottom = "0px"
                // this.ele.classList.add()
                setTimeout(()=>{
                    document.body.removeChild(this.ele)
                    this.ele.style.bottom = "-300px"
                },2000)
            }


        }
    })();

    new Popup("阿飞").show()
    document.onclick = function () {
        new Popup("乌拉").show()

    }
</script>
</body>
</html>